<template>
  <div class="four-main" >
    <div class="top">
      <div class="dot"></div>
      <div class="title">定制客户</div>
    </div>

    <div class="customer-list">
      <div
        :class="['customer-name', sel_index.includes(index) ? `sel` : `nosel`]"
        @click="() => clickSel(index)"
        v-show="item.show"
        v-for="(item, index) in customer"
      >
        <div class="thumb line-feed customer-name-text">
          {{ item.name }}
        </div>

        <div
          class="edit-icon thumb"
          title="编辑"
          @click.stop="() => addCustomer()"
        >
          <img
            :src="
              publicUrl(
                sel_index.includes(index)
                  ? `/images/edit.png`
                  : `/images/edit-black.png`
              )
            "
          />
        </div>
        <div class="frame" v-show="sel_index.includes(index)"></div>
        <!-- <div
          :class="['close', 'thumb']"
          v-show="!item.notDel"
          @click.stop="() => removeCustomer(index)"
          title="删除"
        >
          <img :src="publicUrl(`/images/delTag.png`)" />
        </div> -->
      </div>
      <div class="add-button thumb" @click="addCustomer">新增定制人 +</div>
    </div>

    <div v-show="sel_index.length > 0" class="table-top-container">
      <div class="table-top">
        <div
          :class="[
            'top-column',
            'thumb',
            item === showCustomerTable ? 'sel' : 'nosel',
          ]"
          @click="() => clickTableShow(item)"
          v-for="item in sel_index"
        >
          <div class="text">{{ customer[item].name }}客户</div>
          <div class="bottom" v-show="item === showCustomerTable"></div>
        </div>
      </div>
    </div>

    <div class="dividing" v-show="sel_index.length > 0">
    
    </div>

    <div class="volumn" v-show="sel_index.length > 0">
      <Volume />
    </div>
    <div class="special_content" v-show="sel_index.length > 0">
      <div class="special_body">
        <div
          :class="[
            'special_body-title',
            'thumb',
            actSpecial === 1 ? 'sel' : 'nosel',
          ]"
          @click="() => specialChange(1)"
        >
          特体信息
        </div>
        <div
          :class="[
            'special_body-title',
            'thumb',
            'right',
            actSpecial === 2 ? 'sel' : 'nosel',
          ]"
          @click="() => specialChange(2)"
        >
          刺绣选择
        </div>
      </div>
      <div v-show="actSpecial === 1">
        <Special />
      </div>
      <div v-show="actSpecial === 2">
        <Embroider />
      </div>
    </div>

    <div class="uploads-img">
      <div class="title">
        <div class="dot"></div>
        <span class="big">客户图片版图上传</span
        ><span class="small">（图片最好上传正面、背面、侧面三张图片）</span>
      </div>
      <div class="part"><Uploads /></div>
    </div>

    <div class="make-customer">
      <div class="top">
        <div class="dot"></div>
        <div class="title">备注说明</div>
      </div>

      <div class="remarks">
        <textarea class="textarea" rows="10" cols="30" placeholder="请输入订单备注说明、尺寸说明、面料使用说明等"></textarea>

      </div>
    </div>


    <div class="buttons">

      <div class="left-button button thumb" @click="prev">上一步</div>
      <div class="right-button button thumb" @click="saveOrder">保存订单</div>
      <div class="right-button button thumb" @click="submitOrder">单品提交</div>
      <div class="right-button button thumb" @click="addCart">加入购物车</div>
    </div>
  </div>

  <!-- 定制客户表单弹窗 -->
  <Dialog :addMod="addMod" ref="dialogForm" @save="save" />
  <!--  -->

  <Confirm
    v-model:show="confirmData.show"
    :title="`确定要删除该客户`"
    @confirm="removeCustomerConfirm"
  />

  <CustomerForm ref="customerForm" />

</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl } from "@/utils/util";
import Confirm from "@/components/Confirm/index.vue";
// import { toast } from "vue3-toastify";
import { Customer as CustomerStores } from "@/stores/modules/Customer";
// import Table, { type Column, type DataSource } from "@/components/Table/index";
import mtmFourMod from "@/json/mtmFourMod.json";
import Dialog from "./components/Dialog/index.vue";
import { Form, Customer, Info } from "./interface";
import Special from "./components/Special/index.vue";
import Uploads from "./components/Uploads/index.vue";
import Embroider from "./components/Embroider/index.vue";
import Volume from "@/components/Volume/index.vue";
import CustomerForm from "@/views/Account/Customer/Form/index.vue";
import { toast } from "vue3-toastify";
import { submit } from "dom7";
import {useRouter} from "vue-router";


const customerForm = ref<InstanceType<typeof CustomerForm>>();

const dialogForm = ref<InstanceType<typeof Dialog>>();

// const table = ref<InstanceType<typeof Table>>();

const router = useRouter();

const customerStore = CustomerStores();

const actSpecial = ref<1 | 2>(1);


const emits = defineEmits<{
  (event: "stepChange",step:number): void;
}>();

const addMod: Array<Info> = mtmFourMod as Array<Info>;

const customer = ref<Array<Customer>>([
  {
    ...customerStore.selInfo,
    show: true,
    info: [
      {
        ...addMod[0],
      },
      { ...addMod[1] },
      {
        ...addMod[2],
      },
    ]
  },
  {
    ...customerStore.selInfo,
    show: true,
    info: [
      {
        ...addMod[0],
      },
      { ...addMod[1] },
      {
        ...addMod[2],
      },
    ]
  },
]);

const showCustomerTable = ref<number | null>(null);

const sel_index = ref<Array<number>>([0]);

// const editData = (index: number) => {
//   dialogForm.value?.open(customer.value[index], index);
// };

const save = (form: Form, index: number) => {
  index === -1
    ? customer.value.push({
        ...form,
        show: true,
        info: [
          {
            ...addMod[0],
          },
          { ...addMod[1] },
          {
            ...addMod[2],
          },
        ],
        notDel: true,
      })
    : (customer.value[index] = { ...customer.value[index], ...form });
};

const clickTableShow = (index: number) => {
  showCustomerTable.value = index;
};
clickTableShow(sel_index.value[0]);

const addCustomer = () => {

  // dialogForm.value?.open();
  customerForm.value?.changeVisit(true);

};

const confirmData = ref<{
  show: boolean;
  index: number | undefined;
}>({
  show: false,
  index: undefined,
});

const removeCustomer = (index: number) => {
  confirmData.value.index = index;
  confirmData.value.show = true;
};

const addCart = ()=>{
   toast.success(`加入购物车成功`)
}

const submitOrder = ()=>{
   toast.success(`提交订单成功`)
}

const removeCustomerConfirm = () => {
  if (confirmData.value.index !== undefined) {
    let index: number = sel_index.value.indexOf(confirmData.value.index);

    if (index !== -1) sel_index.value.splice(index, 1);

    if (showCustomerTable.value === confirmData.value.index)
      showCustomerTable.value = sel_index.value[0]; //删除

    customer.value[confirmData.value.index].show = false;

  }
};

const clickSel = (index: number) => {
  let indexOf = sel_index.value.indexOf(index);
  indexOf !== -1
    ? sel_index.value.splice(indexOf, 1)
    : sel_index.value.push(index);
};



const prev = ()=>{
  emits("stepChange",2);
}

const saveOrder = ()=>{
  emits('stepChange',4);
    // toast.success(`保存成功`);
}
const specialChange = (act:1|2)=>{
  actSpecial.value = act;
}


</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
